<!--
 * @Description: vue  use
 * @Autor: lds
 * @LastEditors: lds
-->
<template>
  <h1>测试 vueUse 的鼠标坐标</h1>
  <h3>Mouse: {{ x }} x {{ y }}</h3>
  <hr />
  <div v-if="isSupported">
    <note>
      Clipboard Permission: read <b>{{ permissionRead }}</b> | write
      <b>{{ permissionWrite }}</b>
    </note>
    <p>
      Current copied: <code>{{ text || "none" }}</code>
    </p>
    <input v-model="input" type="text" />
    <button @click="copy(input)">Copy</button>
  </div>
  <p v-else>Your browser does not support Clipboard API</p>
</template>

<script lang="ts" setup>
import { useMouse, useLocalStorage, usePreferredDark, useToggle } from "@vueuse/core";
// 监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置
const { x, y } = useMouse();
//持久化数据的方法，他会把数据持久化到本地存储中
const store = useLocalStorage("my-storage", {
  name: "Apple",
  color: "red",
});
// 使用剪贴板
import { ref } from "vue";
import { useClipboard, usePermission } from "@vueuse/core";
const input = ref("");
const { text, isSupported, copy } = useClipboard();
const permissionRead = usePermission("clipboard-read");
const permissionWrite = usePermission("clipboard-write");
</script>
